<template>
  <div class="flex-start-center list-r-8" :style="{
    width: proxy.$size(width, '100%'),
  }">
    <el-input v-model="keyword" class="flexAuto" placeholder="请输入"
      :disabled="typeof $attrs.disabled === 'function' ? $attrs.disabled(data) : $attrs.disabled" @change="changeBtn" />
    <el-color-picker v-model="keyword" v-bind="{
      predefine: predefineColors,
      ...$attrs,
      disabled: typeof $attrs.disabled === 'function' ? $attrs.disabled(data) : $attrs.disabled
    }" @change="changeBtn" />
  </div>
</template>
<script setup lang="ts">
import { hexToCmyk, cmykToRgb, rgbToHex } from '@/utils/color';
import { getCurrentInstance, reactive, onMounted, ref } from 'vue';
const { proxy } = getCurrentInstance() as any;
//获取父级数据
const props = withDefaults(
  defineProps<{
    data: any;
    dataName?: any;
    width?: string | number;
  }>(),
  {

  },
);
const keyword = computed({
  get() {
    return props.dataName ? props.data[props.dataName] : props.data;
  },
  set(val) {
    if (props.dataName) {
      props.data[props.dataName] = val
    } else {
      props.data = val;
    }
  },
});
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
])
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'changeBtn', val: any, form: any): void;
}>();
const changeBtn = (val: any) => {
  let _hexToCmyk = hexToCmyk(val)
  console.log(_hexToCmyk);
  let _cmykToRgb = cmykToRgb(_hexToCmyk)
  console.log(_cmykToRgb);
  let _rgbToHex = rgbToHex(_cmykToRgb)
  emit('changeBtn', _rgbToHex, props.data)
};


onMounted(() => {

});
</script>
<style scoped></style>
